<template>
  <el-form-item label="开启时间">
    <el-date-picker value-format="YYYY-MM-DD HH:mm:ss" v-model="card166.sdate" type="datetime" placeholder="选择日期时间" @change="onChangeDate('sdate')"></el-date-picker>
  </el-form-item>
  <el-form-item label="结束时间">
    <el-date-picker value-format="YYYY-MM-DD HH:mm:ss" v-model="card166.edate" type="datetime" placeholder="选择日期时间" @change="onChangeDate('edate')"></el-date-picker>
  </el-form-item>
  <el-divider content-position="left">card背景图</el-divider>
  <input-normal label="图片地址" v-model="cardInfo.lc_background" @change="onUpdateCardAttrs"></input-normal>
  <!-- <input-normal label="图片宽度" v-model="card166.image.width" @change="onUpdateCardAttrs"></input-normal>
  <input-normal label="图片高度" v-model="card166.image.height" @change="onUpdateCardAttrs"></input-normal> -->
  <el-divider content-position="left">中心图片区</el-divider>
  <input-normal label="图片地址" v-model="cardInfo.lc_lotties[0].url" @change="onUpdateCardAttrs"></input-normal>
  <el-divider content-position="left">微博头像</el-divider>
  <input-normal label="图片地址" v-model="cardInfo.lc_round_img" @change="onUpdateCardAttrs"></input-normal>
  <el-divider content-position="left">左上文案</el-divider>
  <el-button type="primary"  @click.stop="onAddCardItem" class="margin-bottom-10 margin-left-right-16"><el-icon><i class="jy-icon-plus"></i></el-icon>增加内容</el-button>
    <el-collapse v-model="activeNames">
      <el-collapse-item v-for="(infoItem, index) in cardInfo.lc_infos" :key="index" :name="index+1" class="list-group-item">
        <template #title>
          左上文案{{index}}<i class="jy-icon-delete el-collapse-item__arrow" @click.stop="onDeleteCardItem(index)"></i>
        </template>
        <input-normal label="按钮文案" v-model="infoItem.text" @change="onUpdateCardItem(index)"></input-normal>
        <input-normal label="字体大小" v-model="infoItem.text_size" @change="onUpdateCardItem(index)"></input-normal>
        <color-normal v-model="infoItem.text_color" label="字体颜色" format="rgb" @change="onUpdateCardItem(index)"></color-normal>
        <color-normal v-model="infoItem.bg_start_color" label="起始颜色" format="rgb" @change="onUpdateCardItem(index)"></color-normal>
        <color-normal v-model="infoItem.bg_end_color" label="结束颜色" format="rgb" @change="onUpdateCardItem(index)"></color-normal>
      </el-collapse-item>
    </el-collapse>

  <el-divider content-position="left">左下文案</el-divider>
  <input-normal label="文案" v-model="cardInfo.lc_content.text" @change="onUpdateCardAttrs"></input-normal>
  <input-normal label="字体大小" v-model="cardInfo.lc_content.text_size" @change="onUpdateCardAttrs"></input-normal>
  <color-normal v-model="cardInfo.lc_content.text_color" label="字体颜色" format="rgb" @change="onUpdateCardAttrs"></color-normal>
  <el-divider content-position="left">右下按钮</el-divider>
  <input-normal label="按钮文案" v-model="cardInfo.lc_button.text" @change="onUpdateCardAttrs"></input-normal>
  <input-normal label="字体大小" v-model="cardInfo.lc_button.text_size" @change="onUpdateCardAttrs"></input-normal>
  <color-normal v-model="cardInfo.lc_button.text_color" label="字体颜色" format="rgb" @change="onUpdateCardAttrs"></color-normal>
  <color-normal v-model="cardInfo.lc_button.bg_start_color" label="起始颜色" format="rgb" @change="onUpdateCardAttrs"></color-normal>
  <color-normal v-model="cardInfo.lc_button.bg_end_color" label="结束颜色" format="rgb" @change="onUpdateCardAttrs"></color-normal>
  <color-normal v-model="cardInfo.lc_button.bg_line_color" label="线条颜色" format="rgb" @change="onUpdateCardAttrs"></color-normal>
  <input-normal label="跳转地址" v-model="cardInfo.scheme" @change="onUpdateCardAttrs"></input-normal>
</template>



<script setup lang="ts">
import { Card166 } from '@/store/models/web/web-card'
import { useWebSiteStore } from '@/store/web/site'
import { useWebPageStore } from '@/store/web/page'
import { useWebComponentStore } from '@/store/web/component'

const useWebSite = useWebSiteStore()
const useWebPage = useWebPageStore()
const useWebComponent = useWebComponentStore()

const activeNames = [1]
let card166_: ICard166 | null
const card166 = computed(() => {
  card166_ =  useWebSite.attrs.share.card166
  return card166_
})
let cardInfo_: ICardInfo | null
const cardInfo = computed(() => {
  cardInfo_ =  useWebSite.attrs.share.card166.card_info
  return cardInfo_
})

const onUpdateCardAttrs = () => {
  // useWebSite.updateCardAttrs(card166_)
}
const onAddCardItem = () => {
  const card166Item = _.cloneDeep(Card166.card_info.lc_infos[0])
  cardInfo_.lc_infos.push(card166Item)
}
const onDeleteCardItem = (index: number) => {
  cardInfo_.lc_infos.splice(index, 1)
}
const onUpdateCardItem = (index: number) => {
  // cardInfo_.lc_infos[index] = cardInfo_.lc_infos[index]
}

</script>